<template>
  <div>
    <dog-3
      v-for="item in list"
      :key="item.id"
      :dogName="item.dogName"
      :dogImage="item.dogImgUrl"
      @likeDogs="likeFn"
    />
    <hr />
    <div>
      <ul>
        <li v-for="item in likeDogsArr" :key="item.id">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Dog3 from './components/Dog3.vue'
export default {
  components: { Dog3 },
  data() {
    return {
      list: [
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=39305734,3326886681&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=33fe3fb4e8153382e4b8a3ed36ae5a6b',
          dogName: '博美',
          id: 1,
        },
        {
          dogImgUrl:
            'https://img0.baidu.com/it/u=1617290168,3097121268&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=f12979a796105fabda07e8df6a8af059',
          dogName: '泰迪',
          id: 2,
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=3435293137,922021059&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=32f1faac18068ad722b0cf2ea65c2613',
          dogName: '金毛',
          id: 3,
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=2524788070,524264798&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=979219488e00089467af22377d61f329',
          dogName: '哈士奇',
          id: 4,
        },
        {
          dogImgUrl:
            'https://img1.baidu.com/it/u=1770429533,2003759790&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=ccdffeb7932f4695ad21dddadaf44f39',
          dogName: '阿拉斯加',
          id: 5,
        },
        {
          dogImgUrl:
            'https://img2.baidu.com/it/u=3278253107,2341737719&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=c7a8ed2f6f74fe05834feef771038a5f',
          dogName: '萨摩耶',
          id: 6,
        },
      ],
      likeDogsArr: [],
    }
  },
  methods: {
    likeFn(name) {
      this.likeDogsArr.push(name)
      console.log(this.likeDogsArr)
    },
  },
}
</script>

<style scoped>
.my_div {
  width: 200px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 200px;
}
</style>
